<template>
	<div class="uploadVideo">
		<div class="upload" v-if="showUpload" @click="onUpload">
			<div class="plus"></div>
			<div class="tip">点击上传视频</div>
		</div>
		<div class="preview" v-for="(item, index) in fileList" :key="index">
			<video :src="item.url" class="video"></video>
			<div class="delete"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: "upload-video",
	props: {
		disabled: {
			type: Boolean,
			default: false,
		},
		readOnly: {
			type: Boolean,
			default: false,
		},
		max: {
			type: [Number, String],
			default: -1,
		},
	},
	data() {
		return {
			header: {
				Authorization: "Bearer " + uni.getStorageSync("token") || "",
			},
			fileList: [],
		}
	},
	computed: {
		showUpload() {
			if (this.readOnly) {
				return false
			}
			if (this.max == -1) {
				return true
			}
			return this.fileList.length < this.max
		},
	},
	methods: {
		formatFileList(value) {
			if (Array.isArray(value)) {
				return value.map(item => {
					if (typeof item === "string") {
						return {
							url: item,
							name: item,
							path: item,
						}
					}
					return item
				})
			}
			return []
		},
		onUpload() {
			if (!this.showUpload || this.disabled) return
			uni.chooseVideo({
				success: ({ tempFilePath }) => {
					uni.showLoading({
						title: "上传中",
						mask: true,
					})
					const uploadTask = uni.uploadFile({
						url: "upload",
						filePath: tempFilePath,
						name: "upfile",
						header: this.header,
						success: res => {
							const { data } = res
							const {
								code,
								data: { url, path, name },
							} = JSON.parse(data)
							if (code === 0) {
								this.fileList = [...this.fileList, { url, path, name }]
							}
						},
						complete: () => {
							uni.hideLoading()
						},
					})
					uploadTask.onProgressUpdate(res => {
						uni.showLoading({
							title: `上传中 ${res.progress}%`,
							mask: true,
						})
					})
				},
			})
		},
		onDelete(index) {
			uni.showModal({
				title: "提示",
				content: "确定删除该视频吗？",
				success: ({ confirm }) => {
					if (confirm) {
						this.fileList.splice(index, 1)
					}
				},
			})
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.uploadVideo {
	.upload {
		width: 100%;
		height: 250rpx;
		border-radius: 15rpx;
		border: 1px dashed rgb(197, 197, 197);
		background: #f4f5f7;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.plus {
			width: 30rpx;
			height: 30rpx;
			position: relative;
			margin-bottom: 15rpx;
			&::before,
			&::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 2px;
				background-color: #999;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
			&::before {
				transform: translateY(-50%) rotate(90deg);
			}
		}
		.tip {
			font-size: 28rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}
	.preview {
		position: relative;
		.video {
			width: 100%;
			height: 250rpx;
			display: block;
			border-radius: 15rpx;
			margin-top: 10rpx;
		}
		.delete {
			position: absolute;
			top: 0;
			right: 0;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background: rgb(255, 62, 62);
			&::before,
			&::after {
				content: "";
				position: absolute;
				width: 70%;
				height: 2px;
				background-color: #fff;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform: rotate(45deg);
			}
			&::before {
				transform: rotate(135deg);
			}
		}
	}
}
</style>
